<template>
  <lay-layer v-model="visible" maxmin resize>内容</lay-layer>
  <lay-layer v-model="drawerVisible" type="drawer">
    <button @click="onChangeInteriorDrawerVisible" style="margin:10px;">内部抽屉</button>
    <lay-layer v-model="interiorDrawerVisible" type="drawer" area="200px">内部抽屉内容</lay-layer>
  </lay-layer>
  <button @click="onChangeVisible">组件</button>
  <button @click="openModal">函数</button>
  <button @click="close">关闭</button>
  <button @click="closeAll">关闭全部</button>
  <button type="button" @click="onChangeDrawerVisible">抽屉</button>
  <button type="button" @click="openDrawer">函数抽屉</button>
  <button @click="openMsg">普通消息</button>
  <button type="button" @click="openIframe">远程窗体</button>
</template>

<script setup>
import { ref, h } from "vue";
import { LayLayer, layer } from "../../../src/index";

const visible = ref(false);
const drawerVisible = ref(false);
const interiorDrawerVisible = ref(false);

const onChangeVisible = () => {
  visible.value = true;
}

const onChangeDrawerVisible = () => {
  drawerVisible.value = true;
}

const onChangeInteriorDrawerVisible = () => {
  interiorDrawerVisible.value = true;
}

var instance = null;

const openModal = () => {
  instance = layer.open({
    content: "内容",
    area: ['500px', '500px'],
    maxmin: true
  })
}

const openMsg = () => {
  layer.confirm("你怎么看待 layui-vue 的发布")
}

const close = () => {
  layer.close(instance)
}

const closeAll = () => {
  layer.closeAll()
}

const openIframe = function () {
  layer.open({
    type: 2,
    title: "标题",
    maxmin: true,
    resize: true,
    content: "http://layui-vue.pearadmin.com",
  });
};

const openDrawer = () => {
  layer.drawer({
    title: "抽屉",
    content: "抽屉内容",
    offset: "b",
    area: "300px",
  })
}
</script>

